import React, { useEffect, useState } from 'react'
import { getProductListFn } from '../../api/product'
import { Button, Table, Image } from 'antd'
import ExportJsonExcel from 'js-export-excel'
// cnpm i js-export-excel
export default function Export() {
  const [proList, setProList] = useState([])
  const columns = [
    { title: '商品名称', dataIndex: 'proname' },
    {
      title: '商品图片', dataIndex: 'img1', key: 'img1',
      render(v, r, i) {
        return <Image src={v} style={{ width: 100 }} alt="" />
      }
    },

  ]

  const exportClick = () => {
    // 1.配置导出内容
    const option = {
      fileName: "导出的文件",
      datas: [
        {
          sheetData: proList,//数据源
          sheetName: "商品列表1",//表单名称
          sheetFilter: ['proname', 'img1', 'proid'],//导出的字段，在数组中存在
          sheetHeader: ['商品名称', '商品图片', '商品编号'],//表头名称
          columnWidth: [10, 20, 30]//列宽度
        },{
          sheetData:  [
            { name: '张三', age: 18, sex: '男' },
            { name: '李四', age: 29, sex: '男' },
            { name: '王五', age: 20, sex: '女' },
            { name: '赵六', age: 19, sex: '未知' },
            { name: '田七', age: 30, sex: '女' }
        ],//数据源
          sheetName: "测试列表1",//表单名称
          sheetFilter: ['name', 'age'],
          sheetHeader: ['姓名', '年龄'],
        }
      ]
    }
      // 2.创建一个excel
  const excel = new ExportJsonExcel(option)
  // 3.文件保持在本地,自动下载到本地
  excel.saveExcel()
  }


  useEffect(() => {
    getProductListFn().then(res => {
      console.log(res)
      setProList(res.data)
    })
  }, [])
  return (
    <div>
      <Button type="primary" onClick={() => {
        exportClick()
      }
      }>导出</Button>
      <Table
        dataSource={proList}
        columns={columns}
        rowKey={'proid'}
        scroll={{ y: 450 }}>

      </Table></div>

  )
}
